<template>
  <div class="detail">
      <div class="swiper-box">
          <swiper indicator-dots autoplay circular interval="3000" duration="100" class="swiper">
              <block v-for="(item,index) in picList" :key="index">
                  <swiper-item class="sw-item" >
                      <image mode="aspectFill" :src="item.img_url"></image>
                  </swiper-item>
              </block>
          </swiper>
          <button open-type="share" hover-class="none" class="wxbtn">分享好友</button>
      </div>
      <div class="brief">
          <div class="promise">
              <div>30天无忧退货</div>
              <div>48小时快速退款</div>
              <div>满88元免邮费</div>
          </div>
          <div class="desc">
              <div class="title">{{info.name}}</div>
              <div>{{info.goods_brief}}</div>
              <div class="desc-price">￥{{info.retail_price}}</div>
              <div class="brand" v-if="brand">{{brand}}</div>
          </div>
      </div>

      <!-- 弹出窗-->

      <div class="quantity" @click="selection">
          <span>请选择规格数量</span>
          <img src="../../../static/images/address_right.png" alt="">
      </div>

      <div class="se" v-if="jugdeSelect">

          <div class="mask" @click="selection"></div>

          <div class="select" :class="[jugdeSelect ?'seed':'']" >
              <div class="se-left">
                  <img :src="info.primary_pic_url" alt="">
                  <div class="se-content">
                      <div class="se-price">价格￥{{info.retail_price}}</div>
                      <div class="message">请选择数量</div>
                  </div>
              </div>
              <div class="cancel" @click="selection">
                  x
              </div>
              <div class="seTitle">数量</div>
              <!-- 计数器 -->
              <div class="container">
                  <span @click="changeQuantity(-1)">—</span>
                  <span>{{currentQuantity}}</span>
                  <span @click="changeQuantity(+1)">+</span>
              </div>
              
          </div>
          
      </div>

      <div class="params">
          <div class="params-title">
              商品参数
          </div>
          <div class="p-content" v-for="(item,index) in goods_attribute" :key="index">
              <div class="p-name"><p class="pinp">{{item.name}}</p></div>
              <div class="p-val"><p class="pinp">{{item.value}}</p></div>
          </div>
      </div>

      <Wxparse :content="info.goods_desc" ></Wxparse>

      <div class="qa-box">
          <div class="qa-title">
              常见问题
          </div>
          <div class="qa-container" v-for="(item,index) in qaList" :key="index">
            <div class="quest">
                <p class="circular"></p>
                <p class="question">{{item.question}}</p>
            </div>
            <p class="answer">
                {{item.answer}}
            </p>
          </div> 
      </div>

      <div class="guess">
          <div class="guess-title">
              大家都在看
          </div>
          <div class="guess-box">
              <div class="guess-item" v-for="(item,index) in otherCategory" :key="index">
                  <img :src="item.list_pic_url" alt="">
                  <div class="guess-headline">
                      <div>{{item.name}}</div>
                      <div >￥{{item.retail_price}}</div>
                  </div>
              </div>
          </div>
      </div>
      
      <!-- tabbar -->
      <div class="tabbar">
          <div class="collect" @click="collection" :class="{ct_active : judgeCollect}">
              <img alt="">
          </div>
          <div class="cart">
              <img src="../../../static/images/ic_menu_shoping_nor.png" alt="">
              <div class="tabbar-icon">
                <span class="cartNum"><span class="cartbg">{{quantity}}</span></span>
              </div>
          </div>
          <div class="buy" @click="purchase">立即购买</div>
          <div class="join">加入购物车</div>

      </div>
  </div>
</template>

<script>
import Wxparse from 'mpvue-wxparse'
export default {
    data(){
        return{
            goodsId:'',
            openId:'',
            picList:[],
            info:{},
            brand:'',
            // 当前商品数量
            currentQuantity:0,
            // 判断是否选中
            jugdeSelect:false,
            //  判断是否收藏
            judgeCollect:false,
            quantity:1,
            goods_attribute:[],
            qaList:[],
            otherCategory:[],
            quantity:0
        }
    },
    components:{
        Wxparse
    },
    onShareAppMessage(){
        return {
            title:this.info.name,
            imgurl:this.info.primary_pic_url

        }
    },
    mounted(){
        this.init()
        this.goodsId = this.$mp.query.goodsId || '1135052' //测试
        this.openId = wx.getStorageSync('openId');
        this.getGallery()
    },
    methods:{
        // 还原默认值
        init(){
            this.goodsId='',
            this.openId='',
            this.picList=[],
            this.info={},
            this.brand='',
            // 当前商品数量
            this.currentQuantity=0,
            // 判断是否选中
            this.jugdeSelect=false,
            //  判断是否收藏
            this.judgeCollect=false,
            this.quantity=1,
            this.goods_attribute=[],
            this.qaList=[],
            this.otherCategory=[],
            this.quantity=0
        },
      // 产品与轮播图
       async getGallery(){
           let result = await this.$api.detail.reqGallery({goodsid:this.goodsId,openId:this.openId})
           this.picList = result.data 
           this.info = result.info
           this.brand = result.brand
           this.goods_attribute = result.attribute
           this.qaList = result.question
           this.otherCategory = result.otherCategory
           this.judgeCollect = result.collection
           this.quantity = result.quantity
           

        },
        
        // 控制显示添加数量框
        selection(){
            this.jugdeSelect = !this.jugdeSelect
        },

        changeQuantity(methods){
            this.currentQuantity += methods
            if(this.currentQuantity < 1){
                this.currentQuantity = 0
            }
        },

        // 添加收藏
       async collection(){
            let {collection} = await this.$api.detail.reqJudgeCollect({
                goodsid:this.goodsId,
                openId:this.openId
            })
            this.judgeCollect = collection
       },
       
      // 购买
     async purchase(){
          if(this.jugdeSelect){
            //   判断有无当前商品
            if(this.currentQuantity == 0){
                // 提示消息
                wx.showToast({
                  title: '请先选择购买数量', //提示的内容,
                  icon: 'error', //图标,
                  duration: 2000, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => {}
                });
                return
            }
            // 提交数据库
           let result = await this.$api.order.reqWhiteOrder({
                openId:this.openId,
                goodsId:this.goodsId,
                quantity:this.currentQuantity
            })
            console.log(result);
            if(result.status != 200){
                wx.showToast({
                  title: '提交失败', //提示的内容,
                  icon: 'error', //图标,
                  duration: 2000, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => {}
                });
                return
            }
            this.jugdeSelect = false
            wx.switchTab({ url: '/pages/cart/main' });

          }else{
              this.jugdeSelect = true
          }
      }

    }
}
</script>

<style lang="less" scoped>
@import '~mpvue-wxparse/src/wxParse.css';
@import './index.less';

</style>